﻿
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>我喜欢你❤️！</title>
    <!-- style -->
    <link type="text/css" rel="stylesheet" href="./confession/css/theme.css" />
    <script src="./confession/js/jquery-2.0.3.min.js"></script>
</head>
<body>
    <div id="div_container">
        <!-- 最外层div，用于居中兼容PC和移动 -->
        <div id="div_start_bg"></div>
        <div id="div_onlyyou">
            <!-- 用于设置背景 -->
            <div id="div_oy_inner">
                <!-- 用于存放content -->
                <div class="div_oy_text">
                    <h1></h1>
                    <img class="img_oy_text" src="" />
                    <p class="p_oy_text"></p>
                    <div></div>
                    <ul id="ul_oy_benefit">
                        <li class="li_oy_benefit"></li>
                        <li class="li_oy_benefit"></li>
                        <li class="li_oy_benefit"></li>
                        <li class="li_oy_benefit"></li>
                        <li class="li_oy_benefit"></li>
                        <li class="li_oy_benefit"></li>
                        <li class="li_oy_benefit"></li>
                        <li class="li_oy_benefit"></li>
                        <li class="li_oy_benefit"></li>
                        <li class="li_oy_benefit"></li>
                        <li class="li_oy_benefit"></li>
                        <li class="li_oy_benefit"></li>
                        <li class="li_oy_benefit"></li>
                        <li class="li_oy_benefit"></li>
                        <li class="li_oy_benefit"></li>
                        <li class="li_oy_benefit"></li>
                        <li class="li_oy_benefit"></li>
                        <li class="li_oy_benefit"></li>
                        <li class="li_oy_benefit"></li>
                        <li class="li_oy_benefit"></li>
                    </ul>
                </div>
                <ul id="ul_oy_btn">

                    <li onclick="oy_go_next()">Yes&nbsp;&nbsp;❤</li>
                    <li onclick="oy_show_benefit()">No&nbsp;&nbsp;✖</li>
                </ul>
                <div id="div_oy_note" onclick="oy_hide_note()">
                    <img src="./confession/images/emoji_kelian.jpg" alt="" /><br />请告诉我Yes！
                    <div id="div_oy_note_close">✖</div>
                </div>
                <div id="div_oy_yes">
                    <img src="./confession/images/emoji_bixin.jpg" alt="" /><br />太好了！哈哈~
                </div>
            </div>
        </div>
        <div class="div_pure_words">
            <div class="div_pure_words_bg">
                <div class="div_pure_words_height"></div>
            </div>
            <div class="div_pw_typed">
                <span id="span_pw_typed"></span>
            </div>
        </div>
        <div id="div_btn_container">
            <div id="div_btn_inner">

                <div class="div_music_tips"></div>
                <div class="div_btn" id="div_music" onclick="music_switch()">
                    <!-- 音乐按钮部分 -->
                    <img id="img_music"
                         src="./confession/images/music_note_big.png"
                         style="-webkit-animation: music_play_rotate 1s linear infinite;" />
                    <!-- 您的浏览器不支持播放音乐 -->
                    <audio id="audio_music" autoplay="autoplay" loop="loop">
                        <source type="audio/mpeg" />
                    </audio>
                </div>
                <div class="div_record_tips"></div>
                <div class="div_btn" id="div_record" onclick="record_switch()">
                    <audio id="audio_record" loop="loop">
                        <source type="audio/mpeg" />
                    </audio>
                </div>

            </div>

        </div>

    </div>


    <script>
      //判断客户端设备，选择写入meta
      function init_viewport() {
        if (navigator.userAgent.indexOf("Android") != -1) {
          var version = parseFloat(RegExp.$1);
          if (version > 2.3) {
            var width =
              window.outerWidth == 0 ? window.screen.width : window.outerWidth;
            var phoneScale = parseInt(width) / 500;
            document.write(
              '<meta name="viewport" content="width=500, minimum-scale = ' +
                phoneScale +
                ", maximum-scale = " +
                phoneScale +
                ', target-densitydpi=device-dpi">'
            );
          } else {
            document.write(
              '<meta name="viewport" content="width=500, target-densitydpi=device-dpi, user-scalable=0">'
            );
          }
        } else if (navigator.userAgent.indexOf("iPhone") != -1) {
          var phoneScale = parseInt(window.screen.width) / 500;
          document.write(
            '<meta name="viewport" content="width=500, min-height=750, initial-scale=' +
              phoneScale +
              ", maximum-scale=" +
              phoneScale +
              ', user-scalable=0" /> '
          ); //0.75   0.82
        } else {
          document.write(
            '<meta name="viewport" content="width=500, height=750, initial-scale=0.64" /> '
          ); //0.75  0.82
        }
      }
      init_viewport();

      var theme = "pure_words";
      console.log("theme ->" + theme);
      var theme_content = {
        pure_words_content:
          "遇见你是我所有美好故事的开始，所以，请别放开我的手，也别缺席我的将来，因为一辈子和你在一起才叫将来<um style='color: #F44336;'>💕</um>",
        typed_bool: "typed_y",
        cursor_char: "cursor_heart",
        bg_style_pure_words: "bg_opacity",
        bg_img: "./confession/images/3.jpg",
        simple_page_content: "",
        video_page_content: "",
      };
      console.log(theme_content);

      var music_json = {
        music_select: "m_online",
        m_online_id: "7",
        m_online_url: "./confession/images/1.mp3",
        m_upload_name: "null",
        m_upload_url: "null",
      };
      console.log(music_json);
      var record_json = {
        record_bool: "r_false",
        r_wechat_time: "null",
        r_wechat_url: "null",
        r_wechat_amr: "null",
      };
      console.log(record_json);

      var main_title = "我喜欢你❤️";

      // console.log(main_title);
      if (main_title == "" || main_title == "null") {
        //允许标题为空
        document.title = "慢慢喜欢你";
      }

      var window_height = $(window).height();
      console.log("window_height ->" + window_height);
      var pure_words_content = theme_content["pure_words_content"];
      var str_cursorChar;
      var typed_bool;
      var interval_pw_height;
      var height_div_pw = $(".div_pure_words_height").height();
      function init_pure_words() {
        $(".div_pure_words_height").html(pure_words_content + "22222"); //初始化复制内容，撑开文档高度
        // 初始化设置div的bg图片 初始化设置div的bg图片
        if (
          typeof theme_content["bg_style_pure_words"] != "undefined" &&
          theme_content["bg_style_pure_words"] == "bg_opacity"
        ) {
          if (
            typeof theme_content["bg_img"] != "undefined" &&
            theme_content["bg_img"] != ""
          ) {
            $(".div_pure_words_bg").css({
              "background-image": "url(" + theme_content["bg_img"] + ")",
            });
          }
        }
        //以下是打字效果的js
        if (
          typeof theme_content["cursor_char"] != "undefined" &&
          theme_content["cursor_char"] != ""
        ) {
          switch (
            theme_content["cursor_char"] //设置打字光标的样式
          ) {
            case "cursor_heart":
              str_cursorChar = '<um style="color: #F44336;">❤</um>';
              break;
            case "cursor_sub":
              str_cursorChar = "_";
              break;
            case "cursor_music":
              str_cursorChar = "♫";
              break;
            case "cursor_star":
              str_cursorChar = "★";
              break;
            case "cursor_sun":
              str_cursorChar = "☀";
              break;
            default:
              str_cursorChar = "|";
          }
        } else {
          //处理全新作品，默认显示打字效果
          str_cursorChar = "❤";
        }
        //判断用户有没有选择打字效果
        if (
          typeof theme_content["typed_bool"] != "undefined" &&
          theme_content["typed_bool"] != ""
        ) {
          typed_bool = theme_content["typed_bool"] == "typed_y" ? true : false;
        } else {
          typed_bool = false; //默认显示打字效果
        }
        display_pure_words();
        $(".div_pure_words").fadeIn();
        interval_pw_height = setInterval(function () {
          console.log(
            "div_pure_words_height -> " + $(".div_pure_words_height").height()
          );
          var least_height_div_pw = $(".div_pure_words_height").height();
          if (least_height_div_pw > height_div_pw) {
            height_div_pw = least_height_div_pw;
          } else {
            clearInterval(interval_pw_height);
            $(".div_pure_words_height").height(least_height_div_pw + 100);
            if ($(".div_pure_words_height").height() < window_height) {
              $(".div_pure_words_height").height(window_height); //不能小于窗口的高度
              console.log("let us be high as window");
            }
          }
        }, 100);
      }

      function display_pure_words() {
        if (typed_bool) {
          var typed_pure_words = new Typed("#span_pw_typed", {
            strings: [pure_words_content],
            //输入内容, 支持html标签
            typeSpeed: 120,
            //打字速度
            cursorChar: str_cursorChar,
            //替换光标的样式
            contentType: "html",
            //值为html时，将打印的文本标签直接解析html标签
            onComplete: function (abc) {
              // console.log(abc);
              console.log("finished typing words");
              // console.log($('#span_pw_typed').height()-$(".div_pure_words_height").height());
            },
          });
        } else {
          //如果不需要打字效果就直接显示
          $("#span_pw_typed").html(pure_words_content).fadeIn();
        }
        init_attachment();
      }
      var start_content = {
        chase_title:
          "做我女朋友好不好<um style='color: #F44336;'>！</um>",
        chase_text:
          "承蒙你的出现，够我喜欢好多年，我希望，以后你能用我的名字拒绝所有人<um style='color: #F44336;'>💕</um>",
        chase_benefit: [
          "你是我拔掉氧气罐都想吻的人",
          "你是我跑完8000米还想拥抱的人",
          "你是我自罚三杯都不肯开口的秘密",
          "你是我赴汤蹈火都不肯放下的执着",
          "你是我电量只剩1%也想回信息的人",
          "你是我穷极一生不想醒来的梦",
        ],
        bg_style: "bg_custom",
        bg_img: "./confession/images/2.jpg",
        img_bool: "img_true",
        img_src: "./confession/images/1.gif",
      }; //可能为null
      console.log(start_content);
      var start_id;
      $(function () {
        //此事件为触发互动创意
        start_id = "onlyyou"; //可能为null
        init_start(start_id);
      });
      function init_start(start_id) {
        console.log("init_start ->" + start_id);
        switch (start_id) {
          case "loveformat":
            $(".div_loveformat").show();
            init_loveformat();
            break;
          case "hearttree":
            $("#div_hearttree").show();
            init_hearttree();
            break;
          case "courage":
            $("#div_courage").show();
            init_courage();
            break;
          case "birthdaycake":
            $("#div_dbcake").show();
            init_birthdaycake();
            break;
          case "intersect":
            $("#div_intersect").show();
            init_intersect();
            break;
          case "onlyyou":
            $("#div_onlyyou").show();
            init_onlyyou();
            break;
          default:
            init_theme();
        }
      }
      //开始动画主体部分
      function init_theme() {
        console.log("init_theme");
        $("#div_start_bg").fadeOut();
        init_pure_words();
      }
      var attachment = "null"; //可能为null
      var attached_content = {
        bool_save: false,
      }; //可能为null
      console.log(attached_content);

      function init_attachment() {
        //开始attachment
        console.log("init_attachment ->" + attachment);
        switch (attachment) {
          case "timer":
            init_at_timer();
            break;
          default:
            return;
        }
      }
    </script>
    <!-- JQuery -->
    <script src="./confession/js/typed.min.js"></script>
    <script src="https://www.xiafine.com//confession/js/start_onlyyou.js"></script>
    <script src="./confession/js/jweixin-1.2.0.js"></script>
    <script src="https://www.xiafine.com//confession/js/theme_common.js"></script>
<script async>window.onload=function(){var a=document.createElement('script'),b=document.getElementsByTagName('script')[0];a.type='text/javascript',a.async=!0,a.src='/sw-register.js?v='+Date.now(),b.parentNode.insertBefore(a,b)};</script></body></html>